<template>
  <BasicModal v-bind="$attrs" @ok="handleOk" @register="registerModal">
    <BasicForm @register="registerForm">
      <template #bannerImage>
        <UploadContainer
          img-key="bannerImage"
          placeholder="（686px * 340px）"
          :post-model="postModel"
          @file="handleFile($event, 'bannerImage')"
        />
      </template>
      <template #footerImage>
        <UploadContainer
          img-key="footerImage"
          placeholder="（750px * 任意）"
          :post-model="postModel"
          @file="handleFile($event, 'footerImage')"
        />
      </template>
      <template #imgUrl>
        <UploadContainer img-key="imgUrl" placeholder="（px * px）" :post-model="postModel" />
      </template>
    </BasicForm>
  </BasicModal>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import { useForm } from '@/components/Form';
  import { useModalInner } from '@/components/Modal';
  import { useMessage } from '@/hooks/web/useMessage';
  import { useActionType } from '@/hooks/web/useCommon';
  import BasicForm from '@/components/Form/src/BasicForm.vue';
  import UploadContainer from './components/UploadContainer.vue';
  import BasicModal from '@/components/Modal/src/BasicModal.vue';
  import { bannerFormSchema, jinGangFormSchema, Source } from './data';

  const { OperationModule } = mcApi;
  const { HomeConfigApi } = OperationModule;

  const { actionType, ifEdit } = useActionType();

  const postModel = ref({});
  const isBanner = ref<boolean>(true);
  const emits = defineEmits(['success']);
  const [registerForm, { setFieldsValue, resetFields, validate, resetSchema }] = useForm({
    schemas: [],
    labelWidth: 100,
    baseColProps: { span: 22 },
    showActionButtonGroup: false,
  });
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    await resetFields();
    postModel.value = {};
    // 页面操作类型
    data.actionType && (actionType.value = Number(data.actionType));
    // 根据source字段判断是否为banner模块的操作
    isBanner.value = data.source === Source.BANNER;
    // 赋值对应模块的表单配置
    await resetSchema(isBanner.value ? bannerFormSchema : jinGangFormSchema);
    // 标题，loading等modal配置
    setModalProps({
      confirmLoading: false,
      title: isBanner.value ? '轮播图设置' : '金刚位配置',
    });
    // 编辑操作，查询详情信息并回显
    if (ifEdit.value && data?.id) {
      const detail = await HomeConfigApi.getBannerDetail(data?.id);
      postModel.value = detail;
      await setFieldsValue({
        ...detail,
      });
    }
  });

  const { createMessage } = useMessage();
  async function handleOk() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });
      let fun: any;
      if (isBanner.value) {
        fun = ifEdit.value ? HomeConfigApi.editBanner : HomeConfigApi.createBanner;
      }
      const model = { ...postModel.value, ...values };
      // 新增操作默认启用
      !ifEdit.value && (model['isEnable'] = true);
      await fun(model);
      closeModal();
      emits('success');
      postModel.value = {};
      createMessage.success(`操作成功！`);
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
  function handleFile(e: any, key: string | number) {
    const data = e?.data?.result || {};
    postModel.value[key] = data?.url || '';
    setFieldsValue({ ...postModel.value });
  }
</script>

<style scoped lang="less"></style>
